import React, { useState, useEffect } from 'react'
import axios from 'axios'
import { Card, Image,Tag } from 'react-vant';

function Leave() {
    const [team, setTeam] = useState([])
    const getTeam = async () => {
        const res = await axios.get('http://192.168.0.154:3000/my/team')
        setTeam(res.data)
    }
    useEffect(() => {
        getTeam()
    }, [])

    return (
        <>
            <Card round style={{ marginTop: '20px', display: 'flex', flexWrap: 'wrap', justifyContent: 'space-around', alignContent: 'flex-start', backgroundColor: 'rgb(244, 249, 253)' }}>
                {team.map((item) => {
                    return (
                        <Card round style={{ width: '160px', height: '180px', marginBottom: '10px', backgroundColor: 'white', BrowserRouter: '24px', textAlign: 'center' }} key={item.id}>
                            <Image width={50} height={50} src={item.avatar} round style={{ margin: '0 auto', marginTop: '10px' }} />
                            <p style={{ marginTop: '10px', fontSize: '16px' }}>{item.name}</p>
                            <p style={{ marginTop: '10px', fontSize: '16px' }}>{item.posts}</p>
                            <Tag plain type="primary" style={{marginTop: '20px'}}>
                                {item.grade}
                            </Tag>
                        </Card>
                    )
                })}
            </Card>
        </>
    )
}

export default Leave
